<template>
  <ve-new-navbar title="功能及名词解释" titleBold :borderBottom="false" @custom-back="onCustomBack">
    <template #right>
      <view class="navbar-right" @click="onClickCatalog">
        <ve-icon name="unordered-list" size="32" />
        <view>目录</view>
      </view>
    </template>
  </ve-new-navbar>
  <scroll-view scroll-y="true" :scroll-into-view="intoView" style="height: calc(100vh - 44px)" scroll-with-animation="true">
    <view class="tab-box">
      <view class="tab-item" :class="activeIndex == 1 ? 'active' : ''" @click="() => onClickActive(1)">名词解释</view>
      <view class="tab-item" :class="activeIndex == 2 ? 'active' : ''" @click="() => onClickActive(2)">功能说明</view>
    </view>
    <view class="explain-content">
      <template v-for="item in list" :key="item.id">
        <ve-card :title="item.label" :id="`explain-${item.id}`">
          <view class="explain-item">
            <view v-for="(content, index) in item.content" :key="index">
              <view>{{ content }}</view>
            </view>
          </view>
        </ve-card>
      </template>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  import { onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const intoView = ref('')
  const activeIndex = ref(1)

  const explainList = [
    {
      id: 1,
      label: '费用总额',
      content: ['所有费项的总额之和，取结算状态：待结算、已结算、结算中、部分结算，已关闭已作废的费用不计算在内。'],
    },
    {
      id: 2,
      label: '收款总额',
      content: [
        '所有收款费项的收款总额之和，取结算状态：待结算、已结算、结算中、部分结算，已关闭已作废的费用不计算在内。',
        '线上实收：统计线上收款费项中实收总额',
        '线下实收：统计线下收款费项中实收总额',
      ],
    },
    {
      id: 3,
      label: '付款总额',
      content: [
        '所有收款费项的付款总额之和，取结算状态：待结算、已结算、结算中、部分结算，已关闭已作废的费用不计算在内。',
        '线上实付：统计线上付款费项中实付总额',
        '线下实付：统计线下付款费项中实付总额',
      ],
    },
    {
      id: 4,
      label: 'OTA对账总额',
      content: [
        '所有线上费用总额之和，不包含车损费、油(电)费-收付款、违章费、平台承担的优惠费',
        '取结算状态：待结算、已结算、结算中、部分结算，已关闭已作废的费用不计算在内。',
      ],
    },
    {
      id: 5,
      label: '佣金',
      content: ['对账金额*订单所属渠道设置的抽佣比例'],
    },
    {
      id: 6,
      label: '待结算金额',
      content: ['所有未结金额之和，取结算状态：待结算、结算中、部分结算'],
    },
    {
      id: 7,
      label: '结算中金额',
      content: ['结算方式为嘉联聚合支付，生成收付款码但用户还未扫码支付的金额之和，取结算状态：结算中，支付状态：未支付'],
    },
    {
      id: 8,
      label: '已结算金额',
      content: ['所有已结金额之和，取结算状态：部分结算、已结算'],
    },
    {
      id: 9,
      label: '总额',
      content: ['单笔费项的总金额'],
    },
    {
      id: 10,
      label: '实结',
      content: [
        '单笔费项中已完成结算的金额',
        // , '未对账的费项，实结金额支持修改，修改后不影响结算明细'
      ],
    },
    {
      id: 11,
      label: '未结',
      content: ['单笔费项中未结算的金额'],
    },
    {
      id: 12,
      label: '操作节点',
      content: ['展示费用生成的节点，包含：创建订单、续租、换车、交车、还车、添加用户缴费、订单取消、系统同步'],
    },
    {
      id: 13,
      label: '无需结算',
      content: ['当订单状态变更为已取消时，存在的费项状态会变更为无需结算，同时已结算的费项会自动生成退款，费用名称为【退款-订单取消】'],
    },
  ]
  const funcList = [
    {
      id: 1,
      label: '结算/批量结算',
      content: [
        '1.结算费项时，支持单个结算，也支持选择多个费项批量结算',
        '2.支持部分结算，请注意输入的金额需小于或等于未结金额',
        // '3.如支付方式选择嘉联聚合支付，选择多个费项批量结算时不支持部分结算，单个费项支持部分结算',
      ],
    },
    {
      id: 2,
      label: '修改费用',
      content: ['费用金额不准确时，支持修改，请注意修改的金额需大于或等于未结金额'],
    },
    {
      id: 3,
      label: '删除费项',
      content: [
        '1.费用状态为未结算、无需结算时，支持删除',
        '2.如状态为已结算、部分结算，此时删除需先在对账中撤回，将结算状态变更为未结算',
        '3.如状态为结算中，则需要在嘉联聚合支付账单中操作取消支付，将结算状态变更为未结算',
      ],
    },
    {
      id: 4,
      label: '添加备注',
      content: ['费项支持多次添加多条备注，添加完成后，在备注-更多中可查看所有记录'],
    },
    {
      id: 5,
      label: '通知',
      content: ['1.已结算的费项，对账时被驳回，会通知您', '2.订单取消导致费项不支持操作或自动生成退款费项，会通知您'],
    },
    {
      id: 6,
      label: '设置抽佣比例',
      content: [
        '1.如订单为渠道订单，但不是携程、飞猪、哈啰、悟空四个渠道，而是您手动添加的渠道，可在此处设置抽佣比例',
        '2.设置或修改抽佣比例后，已对账、部分对账的费项不受影响，未对账的费项根据最近比例重新计算抽佣金额',
      ],
    },
    {
      id: 7,
      label: '三方支付账单',
      content: ['结算时选择任意聚合支付，产生的账单可在此处查看'],
    },
    {
      id: 8,
      label: '订单取消对于费用的影响',
      content: ['订单取消后，取消前存在的费项结算状态自动变更为无需结算，同时将已结算金额自动生成退款'],
    },
    {
      id: 9,
      label: '手动添加退款',
      content: ['支持已结算的费项1对1退款，同时也支持额外费用退款'],
    },
  ]

  const list = ref(explainList)

  const onClickActive = (index: number) => {
    activeIndex.value = index
    intoView.value = ''

    if (index == 1) {
      list.value = explainList
    } else {
      list.value = funcList
    }
  }

  const onClickCatalog = () => {
    uni.navigateTo({
      url: '/pages/order/short-order/detail/catalog',
    })
  }

  const onCustomBack = () => {
    uni.redirectTo({
      url: '/pages/order/short-order/detail',
    })
  }

  onShow(() => {
    uni.$on('onCatalogClick', (data: any) => {
      if (data.tabIndex == 1) {
        list.value = explainList
      } else {
        list.value = funcList
      }

      setTimeout(() => {
        activeIndex.value = data.tabIndex
        intoView.value = `explain-${data.item.value}`
      }, 250)
    })
  })
</script>

<style lang="less" scoped>
  page {
    background-color: #f7f8fa;
  }

  .navbar-right {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #1d2129;
    padding: 0 7px;

    .ve-icon {
      margin-right: 5px;
    }
  }

  .tab-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rpx 0;
    font-weight: 400;
    font-size: 14px;
    color: #4e5969;
    background-color: #fff;

    .tab-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 93px;
      height: 32px;
      margin-right: 24rpx;

      &:last-child {
        margin-right: 0;
      }
    }

    .active {
      padding: 10rpx 32rpx;
      color: #007aff;
      background: #f2f3f5;
      border-radius: 100px 100px 100px 100px;
    }
  }

  .explain-content {
    padding: 24rpx 24rpx;
    background-color: #f7f8fa;

    .explain-item {
      padding: 24rpx 0;
    }
  }
</style>
